<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/eui.css">
    <!-- import JavaScript -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script src="../js/eui.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<h1>显示格式化后的时间</h1>
    <h3>计算属性 ：{{ fulTime }}</h3>
    <h3>函数 ：{{ getFulTime() }}</h3>
    <h3>过滤器 ：{{ time | timeFormatter() }}</h3>
    <h3>过滤器传参 ：{{ time | timeFormatter('YYYY-MM-DD') }}</h3>
    <h3>过滤器串联 ：{{ time | timeFormatter() | mySlice }}</h3>
    <h3 :x="msg | mySlice">v-bind过滤器</h3>
</div>
<div id="root2">
    <h2>全局过滤器：{{ msg | mySlice }}</h2>
</div>
</body>
<script type="text/javascript">
    /*
    过滤器：
        定义：对要显示的数据进行特定格式化后再显示的技术（适用于简单的逻辑）
        语法：
            1.注册全局过滤器：Vue.filter（name,callback）
            2.注册局部过滤器：在Vue实例中： filters:{}
            3.使用过滤器： {{ xxx | 过滤器名 }}  或 v-bind:属性 = "xxx | 过滤器名"
        注：
            1.过滤器可以接收额外参数，多个过滤器可以串联（串联时，上一个过滤器的输出即是下一个过滤器的输入）
            2.过滤器没有改变原本的数据，是产生新的对应的数据。
     */
    Vue.filter('mySlice',function(value){
        return value.slice(0,4);
    })
    let vm = new Vue({
        el:'#root',
        data:{
            time:1621561377603,
            msg:'你好，尚硅谷！'
        },
        computed:{
            fulTime(){
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        methods:{
            getFulTime(){
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        filters:{
            timeFormatter(value,param='YYYY-MM-DD HH:mm:ss'){
                return dayjs(value).format(param);
            },
        }
    })
    new Vue({
        el:'#root2',
        data:{
            msg:'hello,atguigu!',
        }
    })
</script>
</html>